<template>
    <div>
        <h1>个人薪资看板</h1>
        <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="true">
            <el-form-item label="年份">
        <el-input v-model="formData.year"></el-input>
      </el-form-item>
      <el-form-item label="月份">
        <el-input v-model="formData.month"></el-input>
      </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
        </el-form>
        
        <el-table :data="page.records" border stripe>
            <el-table-column type="index" width="50" />
            <el-table-column v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                :width="col.width">
            </el-table-column>
           
        </el-table>

        <el-pagination
            @current-change="loadData" 
            v-model:currentPage="page.current" 
            :page-sizes="[2, 4, 6, 8,10]" 
            :page-size="page.size"
            :total="page.total" background>
        </el-pagination>
        <el-dialog
            :destroy-on-close="true"
            :title="title"
            v-model="isVisible"
            width="60%">
            <span></span>
            <template #footer>
            <span>
                <router-view @ref-table="refTable" :data="data"></router-view>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request.js'
import router from '@/router'

//判断是否显示弹窗
let isVisible = ref(false)

let title=ref("");

let refTable=()=>{
    isVisible.value = false
    loadData();
}
const page = ref({
    current: 1,
    size:10,
    total: 0,
    records: []
})
const columns = [
    { id: 'emp', label: '员工姓名'},
    {id:'departmental', label: '部门'},
    {id:'postsname', label: '岗位'},
    {id:'amountDue' , label: '应发工资'},
    { id: 'paySalary', label: '绩效工资'},
    {id:'subsidy',label:"补贴"},  
    {id:'socialSecurity', label: '当月缴纳社保'},
    {id:'accumulationFund', label: '当月缴纳公积金'},
    {id:'otherChargebacks',label: '当月其他扣款'},
    { id: 'personalIncomeTax', label: '当月应纳税所得额'},
    {id:'actualAmount',label: '当月实发'},
    {id:'releaseDate',label:'发放时间'},
     { id: 'issuanceStatus', label: '流程状态'}
]
let formData = ref({})



// 加载数据
let loadData = () => {
    request({
        url: '/outsize',
        method: 'get',
        params: {
            current: page.value.current,
            size: page.value.size,
            ...formData.value
        }
    }).then(res => {
        page.value = res.data
        loadDatas();
    }).catch(error => {
        console.error('加载数据失败:', error);
        ElMessage.error('加载数据失败，请重试');
    })
}


let loadDatas = () => {
    // 遍历表格中的每一条记录
    page.value.records.forEach(async (record, index) => {
        try {
            // 假设根据员工ID查询详细信息，这里使用record.emp作为查询参数
            // 请根据实际接口需求调整参数名和接口地址
            const response = await request({
                url: '/into/getByIds',
                method: 'get',
                params: {
                    id: record.emp  // 假设emp字段存储的是员工ID
                }
            });
            
            // 假设接口返回的数据中包含employeeName字段
            if (response.data && response.data.employeeName) {
                // 用查询到的employeeName覆盖原有的emp字段值
                page.value.records[index].emp = response.data.employeeName;
            }
        } catch (error) {
            console.error(`获取员工${record.emp}信息失败:`, error);
        }
    });
}


loadData()



</script>

<style scoped>

</style>